<template>
  <div>
    <!-- 内容区 -->
    <div class="content">
      <!-- 左侧区域 -->
      <div class="left-side">
        <div class="icon">
          <Icon type="md-pricetag" size="30" />
          渡课(Dodoke) - 全部
        </div>

        <!-- 顶端分类模块 -->
        <!-- <div class="catelog">
          <div class="catelog-detail">测试</div>
          <div class="catelog-detail">测试</div>
          <div class="catelog-detail">测试</div>
          <div class="catelog-detail">测试</div>
          <div class="catelog-detail">测试</div>
          <div class="catelog-detail">测试</div>
        </div> -->

        <!-- 已解决 -->
        <div class="access">
          <div class="access-bar">
            <div class="solved">已解决{{ solved }}/{{ total }}</div>
            &nbsp;-
            <div class="simple">简单{{ simpleNum }}</div>
            <div class="medium">中等{{ medium }}</div>
            <div class="hard">困难{{ hard }}</div>
          </div>
          <!-- 随机开始按钮 -->
          <Button type="primary" ghost @click="toDetail"
            >随机开始<Icon type="ios-shuffle" size="20"
          /></Button>
        </div>

        <!-- 问题列表上端-->
        <div
          style="
            background: linear-gradient(to left, #00ff00, #ffd700, #ff6347);
            height: 2px;
            margin-bottom: 5px;
          "
        ></div>
        <div class="question-list-base">
          <!-- 搜索框 -->
          <Input
            placeholder="搜索题目名称"
            style="width: 40%"
            v-model="title"
            @on-change="selectDataByTitle"
          />
          <!-- 下拉菜单 -->
          <div class="question-filter-base">
            <Dropdown>
              <a href="javascript:void(0)" style="color: #000">
                难度
                <Icon type="ios-arrow-down"></Icon>
              </a>
              <DropdownMenu slot="list">
                <DropdownItem tagName="简单" ref="EASY" name="EASY" @click.native="getEasyData"
                  >简单</DropdownItem
                >
                <DropdownItem tagName="中等" ref="COMMON" name="COMMON" @click.native="getCommonData"
                  >中等</DropdownItem
                >
                <DropdownItem tagName="困难" ref="HARD" name="HARD" @click.native="getHardData"
                  >困难</DropdownItem
                >
                <DropdownItem tagName="全部" ref="ALL" name="HARD" @click.native="getAllData"
                >全部</DropdownItem
                >
              </DropdownMenu>
            </Dropdown>
            <Dropdown>
              <a href="javascript:void(0)" style="color: #000">
                状态
                <Icon type="ios-arrow-down"></Icon>
              </a>
              <DropdownMenu slot="list">
                <DropdownItem>未完成</DropdownItem>
                <DropdownItem>已提交</DropdownItem>
                <DropdownItem>已通过</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </div>
        </div>
        <!-- 隐藏栏，用于展示所选分类标签 -->
        <div class="tagModule" v-show="isShow1">
          <div class="tag1" v-show="isShow2" @click="isShow">{{tag}}<Icon type="md-close" color="red"/></div>
          <div class="tag1" v-show="isShow3">{{ title }}</div>
        </div>
        <hr
          size="1"
          style="
            color: blue;
            border-style: dotted;
            width: 100%;
            margin-top: 10px;
          "
        />
        <!-- 问题列表 -->
        <Table stripe :columns="columns" :data="data"></Table>
        <!-- 分页组件 -->
        <div class="page">
          <Page
            :total="page.total"
            :current="page.current"
            :page-size="page.pageSize"
            :page-size-opts="page.sizeOpts"
            show-total
            show-sizer
            @on-change="pageNumChange"
            @on-page-size-change="pageSizeChange"
          />
        </div>
      </div>

      <!-- 右侧区域 -->
      <div class="right-side">
        <h1>广</h1>
        <h1>告</h1>
        <h1>位</h1>
      </div>
    </div>
  </div>
</template>
<script>
    import { getIndexPageData, getRandomProblem } from '@/api/pageIndex';
    export default {
        name: 'home',
        data () {
            return {
                solved: '0',
                total: '0',
                simpleNum: '0',
                medium: '0',
                hard: '0',
                difficultyItem: false,
                status: false,
                title: '',
                tag: '',
                isShow1: false,
                isShow2: false,
                isShow3: false,
                columns: [
                    {
                        title: '编号',
                        key: 'problemId',
                        align: 'center',
                        renderHeader: (h, params) => {
                            return h(
                                'div',
                                {
                                    style: {
                                        cursor: 'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.query.reverse = !this.query.reverse;
                                            // console.log(this.query);
                                            this.getIndexPageData(this.query);
                                        }
                                    }
                                }, '编号'
                            );
                        }
                    },
                    {
                        title: '题名',
                        key: 'title',
                        align: 'center',
                        render: (h, params) => {
                            let url = 'http://localhost:8081/problems/' + params.row.problemId;
                            return h('div', [
                                h(
                                    'a',
                                    {
                                        attrs: {
                                            href: url,
                                            target: '_blank'
                                        }
                                    },
                                    params.row.title
                                )
                            ],);
                        }
                    },
                    {
                        title: '通过率',
                        key: 'solved',
                        align: 'center',
                        renderHeader: (h, params) => {
                            return h(
                                'div',
                                {
                                    style: {
                                        cursor: 'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.query.passRate = !this.query.passRate;
                                            this.getIndexPageData(this.query);
                                        }
                                    }
                                },
                                '通过率'
                            );
                        }
                    },
                    {
                        title: '难度',
                        key: 'difficulty',
                        align: 'center'
                    }
                ],
                data: [
                    {
                        problemId: '',
                        title: '',
                        passRate: 0,
                        difficulty: ''
                    }
                ],
                page: {
                    total: 0,
                    current: 1,
                    sizeOpts: [20, 50, 100],
                    pageSize: 20
                },
                query: {
                    pageNum: 0,
                    pageSize: 20,
                    title: '',
                    difficulty: '',
                    reverse: false,
                    passRate: false
                }
            };
        },
        computed: {},
        mounted () {
            this.getIndexPageData();
        },
        methods: {
            isShow () {
                // TODO 去掉标签页面数据应该是未经分类过的数据
                if (this.isShow2 == true && this.isShow3 == true) {
                    this.isShow2 = false;
                }
                if (this.isShow2 == true && this.isShow3 == false) {
                  this.isShow2 = false;
                  this.isShow1 = false;
                }
            },
            // 随机开始跳转
            toDetail () {
                getRandomProblem().then((res) => {
                    // console.log(res.data)
                    window.location.href = 'http://localhost:8081/problems/' + res.data;
                });
            },
            // 获取难度为简单的分类数据
            getEasyData (e) {
                // console.log(this.$refs.EASY.name);
                this.query.difficulty = this.$refs.EASY.name;
                // console.log(e.target.innerHTML);
                this.isShow1 = true;
                this.isShow2 = true;
                this.tag = e.target.innerHTML;
                this.getIndexPageData();

            },
            // 获取难度为中等的分类数据
            getCommonData (e) {
                this.query.difficulty = this.$refs.COMMON.name;
              this.isShow1 = true;
              this.isShow2 = true;
                this.tag = e.target.innerHTML;
                this.getIndexPageData();
            },
            // 获取难度为困难的分类数据
            getHardData (e) {
                this.query.difficulty = this.$refs.HARD.name;
              this.isShow1 = true;
              this.isShow2 = true;
                this.tag = e.target.innerHTML;
                this.getIndexPageData();
            },
          getAllData(e) {
            this.query.difficulty = '';
            this.isShow1 = true;
            this.isShow2 = true;
            this.tag = e.target.innerHTML;
            this.getIndexPageData();
          },
            // 搜索栏模糊查询
            selectDataByTitle () {
                // console.log(this.title);
                this.isShow1 = true;
                this.isShow3 = true;
                // eslint-disable-next-line eqeqeq
                if (this.title == '' && this.isShow2 == true) {
                    this.isShow3 = false;
                }
                if (this.title == '' && this.isShow2 == false) {
                  this.isShow1 = false;
                  this.isShow3 = false;
                }
                this.query.title = this.title;
                this.getIndexPageData();
            },
            getIndexPageData () {
                getIndexPageData(this.query).then((res) => {
                    // console.log(res.data);
                    for (let i = 0; i < res.data.list.length; i++) {
                        if (res.data.list[i].difficulty == 'EASY') {
                            res.data.list[i].difficulty = '简单';
                            // eslint-disable-next-line eqeqeq
                        } else if (res.data.list[i].difficulty == 'COMMON') {
                            res.data.list[i].difficulty = '中等';
                        } else {
                            res.data.list[i].difficulty = '困难';
                        }
                        res.data.list[i].solved = res.data.list[i].solved * 100 + '%';
                    }

                    this.data = res.data.list;

                    this.page.total = res.data.total;
                    this.total = res.data.total;
                    this.page.current = res.data.pageNum;
                });
            },
            // 查询第几页内容
            pageNumChange (num) {
                this.query.pageNum = num;
                // 重新获取数据
                this.getIndexPageData();
            },
            // 改变每页显示多少条数据
            pageSizeChange (size) {
                this.query.pageSize = size;
                this.page.pageSize = size;
                this.getIndexPageData();
            },
            showItem () {
                this.difficultyItem = !this.difficultyItem;
                this.status = false;
            },
            showItem2 () {
                this.status = !this.status;
                this.difficultyItem = false;
            }
        }
    };
</script>
<style scoped lang="less">
.content {
  margin: 0 24px;
  padding: 0;
  width: 96%;
  min-height: 1000px;
  //border: 1px solid black;
}
.left-side {
  width: 70%;
  max-height: 1000px;
  // border: 1px solid black;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
}
.right-side {
  border: 1px solid black;
  width: 25%;
  height: 900px;
  float: right;
  margin-right: 10px;
  margin-top: 10px;
}
.icon {
  font-size: 20px;
}
.catelog {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.catelog-detail {
  width: 110px;
  height: 100px;
  background-color: greenyellow;
  border-radius: 10px;
}
.access {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.access-bar {
  width: 50%;
  height: auto;
  display: flex;
  margin-top: 8px;
}
p {
  margin: auto 2px auto 2px;
}
.solved,
.simple,
.medium,
.hard {
  width: auto;
  height: 20px;
  background-color: blue;
  color: white;
  border-radius: 10px;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 5px;
}
.simple {
  background-color: green;
}
.medium {
  background-color: orange;
}
.hard {
  background-color: red;
}
.random {
  width: 100px;
  height: 37px;
  border: 1px#ddd solid;
  text-align: center;
  padding: 6px 0 6px 0;
  border-radius: 5px;
  margin-right: 5px;
}
.question-list-base {
  display: flex;
  justify-content: space-between;
}
.question-filter-base {
  width: 20%;
  display: flex;
  justify-content: space-between;
}
.page {
  width: auto;
  height: 45px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  text-align: center;
  padding-top: 5px;
  background-color: #e8eaec;
}
.tagModule {
  width: 100%;
  height: 34px;
  //border: 1px solid black;
}
.tag1 {
  margin: 3px;
  width: 50px;
  height: 24px;
  border: 1px solid black;
  text-align: center;
  border-radius: 3px;
  background-color: #2db55d;
  color: white;
  font-weight: bold;
  float: left;
}
</style>
